<template>
  <div class="goods-management">
    <!-- 商品列表表格 -->
    <el-table :data="goodsList" style="width: 100%" @row-click="handleRowClick">
      <el-table-column prop="name" label="农产品名称" width="200" />
      <el-table-column prop="publisher" label="发布商" width="200" />
      <el-table-column prop="category" label="分类" width="200" />
      <el-table-column prop="price" label="商品价格" width="200" />
      <el-table-column prop="stock" label="库存数量" width="200" />
      <el-table-column prop="discount" label="折扣" width="200" />
      <el-table-column label="操作" width="165">
        <template #default="scope">
          <el-button type="primary" link @click.stop="openDetailDialog(scope.row)">详情</el-button>
          <el-button type="warning" link @click.stop>审核中</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情对话框 -->
    <el-dialog v-model="dialogVisible" title="商品详情" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="农产品名称">{{ currentGoods?.name }}</el-descriptions-item>
        <el-descriptions-item label="发布商">{{ currentGoods?.publisher }}</el-descriptions-item>
        <el-descriptions-item label="类别">{{ currentGoods?.category }}</el-descriptions-item>
        <el-descriptions-item label="商品价格">{{ currentGoods?.price }}</el-descriptions-item>
        <el-descriptions-item label="库存数量">{{ currentGoods?.stock }}</el-descriptions-item>
        <el-descriptions-item label="折扣">{{ currentGoods?.discount }}</el-descriptions-item>
        <el-descriptions-item label="商品上架时间">{{ currentGoods?.createTime }}</el-descriptions-item>
        <el-descriptions-item label="商品描述">{{ currentGoods?.description }}</el-descriptions-item>
        <el-descriptions-item label="商品图片">
          <el-image style="width: 100px; height: 100px" :src="currentGoods?.imageUrl"
            :preview-src-list="[currentGoods?.imageUrl || '']" fit="cover" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Goods {
  id: number
  name: string
  publisher: string
  category: string
  price: number
  stock: number
  discount: number
  createTime: string
  description: string
  imageUrl: string
}

const goodsList = ref<Goods[]>([
  {
    id: 1,
    name: '苹果',
    publisher: '果农张三',
    category: "水果",
    price: 5.0,
    stock: 100,
    discount: 0.8,
    createTime: '2024-01-01',
    description: '新鲜多汁的苹果',
    imageUrl: 'https://example.com/apple.jpg'
  },
  {
    id: 2,
    name: '香蕉',
    publisher: '果农李四',
    category: "水果",
    price: 3.0,
    stock: 200,
    discount: 0.9,
    createTime: '2024-01-02',
    description: '香甜可口的香蕉',
    imageUrl: 'https://example.com/banana.jpg'
  }
])

const currentGoods = ref<Goods | null>(null)
const dialogVisible = ref(false)

const openDetailDialog = (row: Goods) => {
  currentGoods.value = row
  dialogVisible.value = true
}

const handleRowClick = (row: Goods) => {
  openDetailDialog(row)
}
</script>

<style scoped>
.goods-management {
  padding: 20px;
}
</style>